<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="utils/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<!-- 使用v-html指令输出html代码 -->
			<div v-html="message"></div>
			<!-- 带有v-前缀的特殊属性是【指令】 -->
			<p v-if="seen">now you can see me.</p>
			<!-- 参数在指令后以冒号指明 -->
			<pre>
				<a v-bind:href="url">菜鸟教程</a>
			</pre>
			<!-- v-model指令用来在input, select, textarea,checkbox,radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 -->
			<p v-html="str"></p>
			<button v-on:click="reverseMessage">反转字符串</button>
			<!-- 过滤器的使用 -->
			<p>{{message | filtersDemo}}</p>
			<!-- 过滤器可以串联 -->
			<!-- testFilter是第一个参数，test2是第二个参数  -->
			<p>{{testFilter | unionFliter("test2")}}</p>
			<!-- 以下两句等价，v-bind缩写 -->
			<a v-bind:href="url"></a>
			<a :href="url"></a>
			<!-- 以下两句等价，v-on缩写 -->
			<a v-on:click="doSomething"></a>
			<a @click="doSomething"></a>
		</div>
		
		<script>
			new Vue({
				el:"#app",
				data:{
					message:"this is a message.",
					seen:true,
					url:"https://cn.bing.com/",
					str:"Runoob!",
					testFilter:"test"
				},
				methods:{
					reverseMessage:function(){
						this.str = this.str.split('').reverse().join('');
					},
					doSomething:function(){
						//null
					}
				},
				filters:{
					filtersDemo:function(value){
						if(!value) return '';
						value = value.toString();
						return value.charAt(0).toUpperCase()+value.slice(1);
					},
					unionFliter:function(arg,arg2){
						return arg+' ' +arg2;
					}
				}
			})
		</script>
	</body>
</html>
